import React, {Component} from 'react';
import PropTypes from 'prop-types'
import { List, Button } from 'antd-mobile';
import { NavBar, Icon, Drawer,Popover} from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';
import './Friend.css';
import { withRouter } from "react-router-dom";
class FriendItem extends Component {

  timer = 0;

  avatarUrl = this.props.avatar;

  state = {
    visible: false,
    selected: '',
  };
 
  pop = <Button size = "small" type = "primary" onClick = {()=>this.deleteFriend()}>删除</Button>
  deleteFriend() {
    const{deleteFriendFetch} = this.props
    console.log("delete Friend");
    let url = "http://192.168.43.187:8080/lwj/basic/deleteFriend?uid1="+this.props.userId+"&uid2="+this.props.uid
    deleteFriendFetch(url);
  }


  onTouchStart() {
    var that = this;
    this.timer = setTimeout(function() { 
      that.timer = 0; 
      if(that.state.visible == false)
      that.setState({
        visible: true
      });
      else that.setState({
        visible: false
      });
      }, 1000); 
  }
 
  onClickFriendItem() {
      if(!this.state.visible) this.props.startFriendChat(this.props.friendItem.uid);
  }
  static propTypes = {
    friendItem:PropTypes.object.isRequired,
    startFriendChat:PropTypes.func.isRequired
  }

  render() {
    const Item = List.Item;
    const Brief = Item.Brief;

    return(<div>
      <Item onTouchStart = {()=>{this.onTouchStart.bind(this)();}} 
        extra = {(this.state.visible?this.pop:<br/>)} 
        className ="friend-item" 
        style = {{maxHeight:70}} 
        multipleLine 
        thumb={this.avatarUrl} 
        onClick={() => {this.onClickFriendItem()}}>

        {this.props.friendItem.nickname} 
        <Brief>我爱安卓开发！</Brief>
      </Item></div>)
  }
}

class FriendList extends Component {
  static propTypes = {
    refreshFriendList:PropTypes.func.isRequired,
    startFriendChat:PropTypes.func.isRequired,
    
    setIsOpenChat:PropTypes.func.isRequired,
    friendList:PropTypes.array.isRequired,
    friendState:PropTypes.object.isRequired,
    deleteFriendFetch:PropTypes.func.isRequired
  }

  testState={timer:null}

  componentWillMount() {
      clearInterval(this.testState.timer)
  }

  startChat(uid) {
    const {fetchFriendMessage,login,friendState} = this.props
    let userId = this.props.login.myAccount.uid
    console.log("startChat uid uuid")
    console.log(userId)
    console.log(uid)
    let url = "http://192.168.43.187:8080/lwj/basic/getMSG?uid1="+userId+"&uid2="+uid
    this.props.fetchFriendMessage(url)
    this.props.startFriendChat(uid);
    console.log("after Refresh");
    console.log(this.props);
    this.props.setIsOpenChat(true);
    this.testState.timer = setInterval(()=>fetchFriendMessage(url),2000)
  }

    state = {
      open: false,
    }
    onOpenChange = (...args) => {
      console.log(args);
      this.setState({ open: !this.state.open });
    }

    onMatchClick() {
      this.props.history.push("/Match");
    }   
    onFriendClick() {
      this.props.history.push("/Friend");
        }  
    onQuitClick() {
      this.props.history.push("/");
    }   

    render() {
      // const {loginSuccess,login} = this.props
      // console.log(login)
      const Item = List.Item;
      const Brief = Item.Brief;
      
      const {friendList} = this.props
      
      const matchIconUrl = "https://www.easyicon.net/api/resizeApi.php?id=1217377&size=128";
      const friendIconUrl = "https://www.easyicon.net/api/resizeApi.php?id=1215657&size=128";
      const QuitIconUrl = "https://www.easyicon.net/api/resizeApi.php?id=1152326&size=128";

      const sidebar = (<List>
        <List.Item 
        multipleLine></List.Item>
        <List.Item 
        thumb = {matchIconUrl} 
        multipleLine onClick = {()=>{this.onMatchClick()}}>匹配</List.Item>
        <List.Item 
        thumb = {friendIconUrl} 
        multipleLine onClick = {()=>{this.onFriendClick()}}>好友</List.Item>
        <List.Item 
        thumb= {QuitIconUrl} style = {{color:"blue"}}
        multipleLine onClick = {()=>{this.onQuitClick()}}>退出</List.Item>
      </List>);

      return (
      <div>
    <NavBar className = "my-friend-list-bar" onLeftClick={this.onOpenChange}
      mode="dark"
      leftContent={[
        <Icon onClick={()=>{console.log("onleft");this.onOpenChange();}} key="0" type="ellipsis" style={{ marginRight: '16px' }} />
      ]}
    >Friend List</NavBar>
    <List renderHeader={() => 'Friend'} className="my-list">
    {
      friendList.map(friendItem =>
        <FriendItem avatar = {friendItem.avatar} key = {friendItem.id} friendItem = {friendItem} startFriendChat = {this.startChat.bind(this)} deleteFriendFetch = {this.props.deleteFriendFetch} uid = {friendItem.uid} userId = {this.props.login.myAccount.uid}/>
    )
    }
    </List>
    
    {this.state.open == true?<Drawer
    onClick={() => {console.log("onDrawclick")}}
    className="my-drawer"
    style={{ minHeight: document.documentElement.clientHeight }}
    enableDragHandle
    contentStyle={{ color: '#A6A6A6', textAlign: 'center', paddingTop: 42 }}
    overlayStyle={{ color: '#A6A6A6'}}
    sidebar={sidebar}
    open={this.state.open}
    onOpenChange={this.onOpenChange}
    />:<br/>}

      
    </div>);
        }
}
export default withRouter(FriendList)